<script>
export default {
  name: "index",
  data() {
    return {
      screenHeight: 0,
      screenWidth:0,
      timer: false,
      scroll: {
        y: document.body.clientHeight - 350,
        x:0
      }
    }
  },
  methods: {},
  mounted() {
    this.screenHeight = document.body.clientHeight - 350
    this.screenWidth = 0

    const that = this
    window.onresize = () => {
      return (() => {
        that.screenHeight = document.body.clientHeight - 350
        that.screenWidth = document.body.clientWidth - 260
      })()
    }
  },
  watch: {
    screenHeight(val) {
      if (!this.timer) {
        this.timer = true
        let that = this
        this.scroll.y=val
        setTimeout(function () {
          that.timer = false
        }, 400)
      }
    },
    screenWidth(val) {
      if (!this.timer) {
        this.timer = true
        let that = this
        if(val<1300){
          this.scroll.x=1300
        }else{
          this.scroll.x=0
        }
        setTimeout(function () {
          that.timer = false
        }, 400)
      }
    }
  },
  render() {
    const on = {
      ...this.$listeners
    }

    const props = {...this.$attrs, ...this.$props}

    // slots循环
    const slots = Object.keys(this.$slots).map(slot => {
      return (
          <template slot = {slot}>{this.$slots[slot]}</template>
      )
    })
    const table = (
        <a-table
            customRow = {(record) => {
              let height = 50;
              if (this.screenHeight === 0) {
                return {}
              }
              let _height = parseInt(this.screenHeight / 10)
              if (document.body.clientHeight < 750) {
                height = 38
              } else {
                height = _height
              }
              return {
                class: {
                  trBox: true
                },
                style: {
                  'height': height + 'px'
                }
              }
            }}
            scroll={this.scroll}
            props = {props}
            scopedSlots = {this.$scopedSlots}
            on = {on}>
          {slots}
        </a-table>
    )
    return (
        <div id="my-table">
          {table}
        </div>

    )
  }
}
</script>
<style>


</style>
<style scoped lang = "scss">
#my-table ::v-deep .ant-table-fixed-header .ant-table-scroll .ant-table-header{
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  //background: #207064;
  margin-bottom: 0 !important;
  height: 56px;
  //padding-right: 16px;
}
::v-deep .trBox > td {
  height: 38px !important;
}
::v-deep .ant-table-tbody > tr > td{
  padding: 0 !important;
}

</style>

